<template>
  <!-- 批量导入导出 -->
  <div>
    <div class="titleBtn">
      <!-- 导出Excel -->
      <el-button
        v-if="show == 'all' || show == 'export'"
        @click="exportClick"
        type="primary"
        size="small"
        style="margin: 0 20px"
        icon="el-icon-folder-opened"
        >导出</el-button
      >
      <!-- 导入Excel -->
      <el-upload
        v-if="show == 'all' || show == 'readExcel'"
        action="/上传文件的接口"
        :on-change="onChange"
        :auto-upload="false"
        :show-file-list="false"
        accept=".xls, .xlsx"
        ref="upload"
        :multiple="true"
      >
        <el-button type="warning" icon="el-icon-folder-add" size="small"
          >导入</el-button
        >
      </el-upload>
    </div>
  </div>
</template>


<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  props: {
    // 需要的表格dom
    DOM: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 需要展示的内容是什么 export导出  import导入  all全部
    show: {
      type: String,
      default: "all",
    },
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    //导出
    exportClick() {
      //第一个参数是到处后文件名，第二个是id绑定表格dom
      this.exportExcel("test");
      //   console.log(this.DOM.$el);
    },
    //转换数据
    exportExcel(filename) {
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
      var table = this.DOM.$el.cloneNode(true);
      var wb = XLSX.utils.table_to_book(table, xlsxParam);
      /* 获取二进制字符进行输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          filename + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") {
          console.log(e, wbout);
        }
      }
      return wbout;
    },
    //导入
    onChange(file, fileList) {
      this.readExcel(file); // 调用读取数据的方法
    },
    // 读取数据
    readExcel(file) {
      let that = this;
      if (!file) {
        //如果没有文件
        return false;
      } else if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          if (workbook.SheetNames.length >= 1) {
            this.$message({
              message: "导入数据表格成功",
              showClose: true,
              type: "success",
            });
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          console.log("生成json：", ws);
          // that.tableData = [];
          for (var i = 0; i < ws.length; i++) {
            // console.log(ws[i]);
            let sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              date: ws[i]["姓名"],
              name: ws[i]["姓名"],
              province: ws[i]["信息"],
              city: ws[i]["__EMPTY_1"],
              address: ws[i]["地址"],
              zip: ws[i]["__EMPTY_3"],
            };
            console.log("上传的数据:", sheetData);
            //添加到表格中
            that.list.push(sheetData);
            //正常导入需要拿到上传的数据就在这从新弄个数组push进去，然后传给后台，后台保存后查询表格返给前端。
          }
          this.$emit("import", that.list);
          //   console.log(that.tableData, 99999);
          this.$refs.upload.value = "";
        } catch (e) {
          console.log(e);
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(file.raw);
    },
  },
};
</script>


